<template>
  <kui-page ref="pageL" :customHeader="true" :mode="data.mode">
    <template v-slot:body>
      <view
        class="
          kui-flex
          kui-flex-col
          kui-items-center
          kui-justify-center
          kui-pt-10
          kui-pb-10
        "
      >
        <kui-image
          src="/static/kviewui.png"
          :radius="10"
          :width="440"
          :height="110"
        ></kui-image>
        <view class="kui-mt-12">
          <!-- <kui-popup ref="popup"></kui-popup> -->
          <kui-button :mode="data.mode">主要按钮</kui-button>
          <kui-button :mode="data.mode" type="secondary">次要按钮</kui-button>
          <kui-button :mode="data.mode" type="dashed">虚线按钮</kui-button>
          <kui-button :mode="data.mode" type="outline">线形按钮</kui-button>
          <view class="kui-mt-12">
            <kui-text>暗黑模式：</kui-text>
            <switch :checked="false" @change="changeMode" />
          </view>
          <view class="kui-mt-12">
            <kui-text>打开遮罩：</kui-text>
            <switch :checked="false" @change="changeShade" />
          </view>
          <view class="kui-mt-12">
            <view @tap="onTaped">
              <kui-button>自定义主题生成器</kui-button>
            </view>
          </view>
          <view class="kui-mt-12">
            <kui-tabs :list="['分类1', '分类2']"></kui-tabs>
          </view>
        </view>
      </view>
      <view class="kui-mt-12">
        <view class="kui-mt-12 kui-p-2">
          <kui-text>手风琴效果：</kui-text>
          <switch :checked="false" @change="changeMode1" />
        </view>
        <kui-collapse :accordion="data.accordion" @change="onChange">
          <kui-collapse-panel
            name="a"
            :disabled="false"
            :custom-arrow-icon="true"
          >
            <view class="">
              <text
                >自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容</text
              >
            </view>
          </kui-collapse-panel>
          <kui-collapse-panel name="b">
            <view class="">
              <text
                >自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容</text
              >
            </view>
          </kui-collapse-panel>
        </kui-collapse>
      </view>
      <view class="kui-mt-10"></view>
    </template>
    <kui-popup ref="popup"></kui-popup>
  </kui-page>
</template>

<script lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";

import { reactive, provide, getCurrentInstance, nextTick } from "vue";

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    interface dataType {
      title?: string;
      mode?: string;
      accordion?: boolean;
      popupShow?: boolean;
    }

    const data: dataType = reactive({
      title: "Hello",
      mode: "light",
      accordion: false,
      popupShow: false,
    });

    onLoad((option) => {
      console.log(
        uni.kviewUIColor.generate("#00BC79", {
          dark: true,
          list: false,
          index: 0,
        })
      );
    });

    // watch(()=>data.mode, (newVal) => {
    //   console.log(newVal);
    //   provide('changeMode', newVal);
    // })
    let isProvide = false;

    const changeMode = () => {
      data.mode = data.mode == "light" ? "dark" : "light";
      // provide("changeMode", data.mode);
      isProvide = true;
      uni.$emit("changeMode", data.mode);
    };

    const changeShade = () => {
      nextTick(() => {
        console.log(proxy.$refs["popup"].open());
      });
      // console.log(proxy.$refs.popup.open());
    };

    onShow(() => {
      if (isProvide) {
        provide("changeMode", data.mode);
      }
    });

    const changeMode1 = () => {
      data.accordion = !data.accordion;
    };

    const onTaped = () => {
      console.log(22222);
      uni.navigateTo({
        url: "/pages/theme/theme",
      });
    };

    const onChange = (e) => {
      console.log(e);
    };

    return {
      data,
      changeMode,
      changeShade,
      changeMode1,
      onTaped,
      onChange,
    };
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
